<style lang="less" rel="stylesheet/less" scoped>
    // 导航
    .nav{
        margin: 0 0.1rem;
        li{
            width: 50%;
            height: 0.8rem;
            border: 1px solid #BBBBBB;
            border-radius: 3px;
            font-size: 0.28rem;
            line-height: 0.8rem;
            text-align: center;
        }
        .isLi{
            background-color: #BBBBBB;
        }
    }
    .book-list{
        margin: 0 0.1rem;
        font-size: 0.27rem;
        li{
            align-items: center;
            border: 1px solid #bbbbbb;
            margin: 0.2rem 0;
            padding: 0.2rem;
            .book{
                position: relative;
                img{
                    width: 25vw;
                    height: 20vmax;
                    display:inline-block;    
                }
                i{
                    position:absolute;
                    right: 0.1rem;
                    bottom: 0;
                    font-size: 0.4rem;
                    color: aqua;
                }
            }
            .book-info{
                width: 50vw;
                line-height: 0.6rem;
                span{
                    display: block;
                    float: right;
                }
            }
        }
    }
</style>
<template>
    <div class="logistics">
        <!-- 搜索 -->
        <div class="box-left search-box">
            <div class="box-left search-text">
                <img src="../assets/img/search.png" alt="搜索" class="search-img">
                <input type="text" placeholder="书名、作者、ISBN号" readonly v-model="searchInfo" class="search" @click="pathTo(3)">
            </div>
        </div>
        <ul class="box-between nav">
            <li :class="[isNavLi == 0?'isLi':'']" @click="pathTo(0)">借阅</li>
            <li :class="[isNavLi == 1?'isLi':'']" @click="pathTo(1)">归还</li>
        </ul>
        <ul class="book-list">
            <li v-for="(item,index) in borrowAlso" :key="index" class="box-between">
                    <div class="book">
                        <img :src="item.img" :alt="item.name">
                        <i>{{ index }}.8</i>
                    </div>
                    <div class="book-info">
                        <p>书名：{{ item.name }}</p>
                        <p>作者：{{ item.user }}</p>
                        <span>图书状态：{{ item.state }}</span>
                    </div>
            </li>
        </ul>
    </div>
</template>

<script>
    import p1 from '../assets/img/p1.jpg'
    import p2 from '../assets/img/p2.jpg'
    import p3 from '../assets/img/p3.jpg'
    import p4 from '../assets/img/p4.jpg'

    export default {
        name: "",
        //数据
        data() {
            return {
                searchInfo:'',
                isNavLi:0,
                borrowAlso:[],
                aa:[{img:p1,name:'自在独行',user:'贾平凹',state:'已归还',info:2},],
                bb:[
                    {img:p2,name:'自在独行',user:'贾平凹',state:'配送中',info:0},
                    {img:p3,name:'自在独行',user:'贾平凹',state:'剩余28天',info:1},
                    {img:p4,name:'自在独行',user:'贾平凹',state:'超期归还',info:2},
                ]
            };
        },
        // 计算属性
        computed: {
        },
        //组件
        components: {},
        //初始化数据
        mounted() {
            document.title = '流通';
            this.pathTo(0)
        },
        //方法
        methods: {
            pathTo(num){
                this.isNavLi = num;
               switch (this.isNavLi){
                    case 0:
                        this.borrowAlso=this.bb;
                        break;
                    case 1:
                        this.borrowAlso = this.aa;
                        break;
                    case 3:
                        this.$router.push({ name: "Search" });
                        break;
               }
               console.log(this.borrowAlso)
            }
        },
        filters: {}
    };
</script>
